<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>毕业生简历管理系统</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.dialog.css" />
    <link rel="stylesheet" href="css/info-mgt.css" />
    <link rel="stylesheet" href="css/WdatePicker.css" />
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="css/index.css" />
</head>
<style>
    #h2{
        text-align:center;
        padding-left: 0px;
    }
    h1{
        font-family: 华文行楷;
        color: white;
    }
</style>
<body>
<div id="container">
    <div id="hd">
        <div class="hd-wrap ue-clear">
            <div class="top-light"></div>
            <h1 style="margin-top: 20px">毕业生简历管理系统</h1>
            <div class="login-info ue-clear">
                <div class="welcome ue-clear"><span>欢迎您,</span><a href="employerRecommend?e_id=${sessionScope.employer.e_id}" class="user-name">${sessionScope.employer.name}</a></div>
            </div>
            <div class="toolbar ue-clear">
                <a href="employerExit" class="quit-btn exit"></a>
            </div>
        </div>
    </div>
    <div id="bd">
        <div class="wrap ue-clear">
            <div class="sidebar">
                <h2 class="sidebar-header" style="margin-top: 1px"><p>功能导航</p></h2>
                <ul class="nav" style="min-height: 619px;margin-top: -10px">
                    <li class="recommend"><div class="nav-header" onclick="employerSkip1()"><a  class="ue-clear"><span>内容推荐</span></a></div></li>
                    <li class="search"><div class="nav-header" onclick="employerSkip7()"><a class="ue-clear"><span>人才搜索</span></a></div></li>
                    <li class="position_manage"><div class="nav-header" onclick="employerSkip8()"><a class="ue-clear"><span>招聘岗位管理</span></a></div>
                    <li class="inform"><div class="nav-header" onclick="employerSkip5()" ><a  class="ue-clear"><span>求职者通知</span></a></div></li>
                    <li class="manage"><div class="nav-header" onclick="employerSkip6()" ><a  class="ue-clear"><span>聘用信息反馈</span></a></div></li>
                </ul>
            </div>
            <div class="content">
                <div class="title" style="height: 35px"><h2 id="h2" style="margin-top: 10px">${c_name}</h2></div>
                <br>
<%--                <form class="layui-form">--%>
<%--                    <div>--%>
<%--                        <label style="float: left;padding: 9px 15px;font-weight: 400">在线名单：</label>--%>
<%--                        <div class="layui-input-block" style="width: 1153px">--%>
<%--                            <select id="onLineUser" class="form-control"  lay-verify="required" style="text-align: center">--%>
<%--                                <option>请选择</option>--%>
<%--                            </select>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </form>--%>
<%--                <hr/>--%>
                <div id="message" style="text-align: center;height: 371px;overflow-x:hidden"></div>
                <input  type="text" value="${username}" id="username" style="display: none" />
                <input  type="text" value="${c_name}" id="c_name" style="display: none" />
                <hr/>
<%--                <form>--%>
                    <div class="layui-form-item layui-form-text">
                        <label style="float: left;padding: 9px 15px;font-weight: 400">发送内容：</label>
                        <div class="layui-input-block">
                            <textarea id="text" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" onclick="send()" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button style="float:right;text-align: right" class="layui-btn layui-btn-primary layui-border-blue" style="margin-top: -60px" onclick="closeWebSocket()">关闭连接</button>
                        </div>
                    </div>
<%--                </form>--%>
                <div class="pagination ue-clear"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./layui/layui.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/jquery.dialog.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/WdatePicker.js"></script>
<script>
    function employerSkip1(){ const e_id="${employer.e_id}"; location.href="employerRecommend?e_id="+e_id}
    function employerSkip7(){ const e_id="${employer.e_id}"; location.href="findAllCandidates?e_id="+e_id}
    function employerSkip3(){ const e_id="${employer.e_id}"; location.href="employerPublish?e_id="+e_id}
    function employerSkip4(){ const e_id="${employer.e_id}"; location.href="employerCancel?e_id="+e_id}
    function employerSkip5(){ const e_id="${employer.e_id}"; location.href="employerNotice?e_id="+e_id}
    function employerSkip6(){ const e_id="${employer.e_id}"; location.href="findAllAcceptedCandidatesByEId?e_id="+e_id}
    function employerSkip8(){ const e_id="${employer.e_id}"; location.href="findAllPositionsByEId?e_id="+e_id}

    const  msg="${msg}";
    if(msg){
        alert(msg);
    }


    var webSocket;
    var commWebSocket;
    if ("WebSocket" in window)
    {
        webSocket = new WebSocket("ws://localhost:8080/websocket/"+document.getElementById('username').value);

        //连通之后的回调事件
        webSocket.onopen = function()
        {
            //webSocket.send( document.getElementById('username').value+"已经上线了");
            console.log("已经连通了websocket");
            setMessageInnerHTML("您已上线！");
        };

        //接收后台服务端的消息
        webSocket.onmessage = function (evt)
        {
            var received_msg = evt.data;
            console.log("数据已接收:" +received_msg);
            var obj = JSON.parse(received_msg);
            console.log("可以解析成json:"+obj.messageType);
            //1代表上线 2代表下线 3代表在线名单 4代表普通消息
            if(obj.messageType==1){
                var onlineName = obj.username;
                setMessageInnerHTML(onlineName+"上线了");
            }
            else if(obj.messageType==2){
                var offlineName = obj.username;
                setMessageInnerHTML(offlineName+"下线了");
            }
            else if(obj.messageType==3){
                var onlineName = obj.onlineUsers;
                console.log("获取了在线的名单"+onlineName.toString());
            }
            else{
                // setMessageInnerHTML(obj.fromusername+"对"+obj.tousername+"说："+obj.textMessage);
                if(obj.textMessage=="对方还未上线！"){
                    var html= '<div style="float: right; padding: 15px;background-color: darkcyan;border-radius: 10px;width:auto; display:inline-block !important; display:inline;color:white;">' +obj.textMessage+ '</div><br><br><br><br>'
                    $("#message").append(html);
                }else{
                    var html= '<div style="float: right; padding: 15px;background-color: darkcyan;border-radius: 10px;width:auto; display:inline-block !important; display:inline;color:white;">' +obj.textMessage+" : "+obj.fromusername + '</div><br><br><br><br>'
                    $("#message").append(html);
                }
            }
        };

        //连接关闭的回调事件
        webSocket.onclose = function()
        {
            console.log("连接已关闭...");
            setMessageInnerHTML("您已下线！");
        };
    }
    else{
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function closeWebSocket() {
        //直接关闭websocket的连接
        webSocket.close();
    }

    function send() {
        if($("#text").val()==""){
            alert("输入不能为空！");
            return;
        }

        var toName = $("#c_name").val();
        var html = '<div style=" word-break: break-all;word-wrap: break-word;float:left;padding: 15px;background-color: darkcyan;border-radius: 10px;width:auto; display:inline-block !important; display:inline;color:white;">'+document.getElementById('username').value+" : " + $("#text").val() + '</div><br><br><br>'
            $("#message").append(html);

        var message = {
            "message":document.getElementById('text').value,
            "username":document.getElementById('username').value,
            "to":toName
        };
        webSocket.send(JSON.stringify(message));
        $("#text").val("");
    }
</script>

</html>